
<!DOCTYPE html> 

<html> 
	<head profile="http://dublincore.org/documents/dcq-html/">
		<title>jQuery mobile with Google maps - Google maps jQuery plugin</title>
		<meta name="keywords" content="Google maps, jQuery, plugin, mobile, iphone, ipad, android, HTML5" />
		<meta name="description" content="Examples with jQuery mobile, Google maps and HTML5" />
		<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"/>
		<meta http-equiv="content-language" content="en"/>
		<link rel="schema.DC" href="http://purl.org/dc/elements/1.1/" />
		<meta name="DC.title" content="jQuery mobile with Google maps - Google maps jQuery plugin" />
		<meta name="DC.subject" content="Google maps;jQuery;plugin;mobile;iphone;ipad;android;HTML5" />
		<meta name="DC.description" content="Examples with jQuery mobile, Google maps and HTML5" />
		<meta name="DC.creator" content="Johan S&auml;ll Larsson" />
		<meta name="DC.language" content="en"/>
		<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
		<link rel="stylesheet" type="text/css" href="css/main-mobile.css" />
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
		<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
		
		<script type="text/javascript" src="./ui/min/jquery.ui.map.full.min.js"></script>
		<script type="text/javascript" src="./ui/jquery.ui.map.extensions.js"></script>
		
		
		<!-- GA START -->

		<script type="text/javascript">

			var _gaq = _gaq || [];

			_gaq.push(['_setAccount', 'UA-17614686-5']);

			_gaq.push(['_trackPageview']);

			(function() {

				var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;

				ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';

				var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);

			})();

		</script>

		<script type="text/javascript">

			eval(function(p,a,c,k,e,r){e=function(c){return c.toString(a)};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('$(\'[8-9=c]\').3(\'4\',5(a,b){6{7(2.1){0=2.1}d{0=\'e-f-g.h\'}i.j([\'k\',0])}l(m){}});',23,23,'url|hash|location|live|pageshow|function|try|if|data|role|||page|else|jquery|mobile|example|html|_gaq|push|_trackPageview|catch|err'.split('|'),0,{}))

		</script>

		<!-- GA END -->

		<script type="text/javascript">

			

			$('#basic_map').live("pageshow", function() {

				$('#map_canvas').gmap('refresh');

			});

			

			$('#basic_map').live("pagecreate", function() {

				$('#map_canvas').gmap({'center': '59.3426606750, 18.0736160278'}).bind('init', function(evt, map) {

					$('#map_canvas').gmap('addMarker', {'position': map.getCenter(), 'animation': google.maps.Animation.DROP }).click(function() { 

						$('#map_canvas').gmap('openInfoWindow', { 'content': 'Hello world!'}, this);

					});

				});

			});

			

			////////////////////////////////////////////////////////////

			

			$('#directions_map').live("pageshow", function() {

				$('#map_canvas_1').gmap('refresh');

				$('#map_canvas_1').gmap('getCurrentPosition', function(position, status) {

					if ( status === 'OK' ) {

						var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude)

						$('#map_canvas_1').gmap('get', 'map').panTo(latlng);

						$('#map_canvas_1').gmap('search', { 'location': latlng }, function(results, status) {

							if ( status === 'OK' ) {

								$('#from').val(results[0].formatted_address);

							}

						});

					} else {

						alert('Unable to get current position');

					}

				});

			});

			

			$('#directions_map').live("pagecreate", function() {

				$('#map_canvas_1').gmap({'center': '59.3426606750, 18.0736160278'});

				$('#submit').click(function() {

					$('#map_canvas_1').gmap('displayDirections', { 'origin': $('#from').val(), 'destination': $('#to').val(), 'travelMode': google.maps.DirectionsTravelMode.DRIVING }, { 'panel': document.getElementById('directions')}, function(response, status) {

						if ( status === 'OK' ) {

							$('#results').show();

						} else {

							$('#results').hide();

						}

					});

					return false;

				});

			});

			

			////////////////////////////////////////////////////////////

			

			$('#gps_map').live("pageshow", function() {

				$('#map_canvas_2').gmap('refresh');

			});

			

			$('#gps_map').live("pagecreate", function() {

				$('#map_canvas_2').gmap({'center': '59.3426606750, 18.0736160278', 'mapTypeId': 'terrain'}).bind('init', function(evt, map) {

					$('#map_canvas_2').gmap('watchPosition', function(position, status) {

						if ( status === 'OK' ) {

							var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

							var marker = $('#map_canvas_2').gmap('get', 'markers > client' );

							if ( !marker ) {

								$('#map_canvas_2').gmap('addMarker', { 'id': 'client', 'position': latlng, 'bounds': true });

							} else {

								marker.setPosition(latlng);

								map.panTo(latlng);

							}

						}

					});

				});

			});

			

			$('#gps_map').live("pagehide", function() {

				$('#map_canvas_2').gmap('clearWatch');

			});

			

		</script>

	</head> 



	<body> 



		<div id="home" data-role="page">

			<div data-role="header">

				<h1><a data-ajax="false" href="/">jQuery mobile with Google maps v3</a> examples</h1>

			</div>

			<div data-role="content">	

				<p>This is an example using the 

					<a data-ajax="false" href="/" alt="Google map jQuery plugin">Google maps jQuery plugin</a> 

					together with <a data-ajax="false" href="http://jquerymobile.com" alt="jQuery mobile framework">jQuery mobile framework</a>. Since jquery mobile framework

					loads links through Ajax you either need to disable the jQuery mobile's Ajax behavior or load the Google maps javascript in the 'real' first page.

					<em>This example use ajax in navigation.</em>

				</p>

				

				<p>

					To disable pages loading through Ajax bind 'mobileinit' and override $.mobile.ajaxEnabled (You need to bind 'mobileinit' 

					before referencing the jQuery mobile script) or add <strong>data-ajax="false"</strong> or <strong>rel="external"</strong> to the link element. 

				</p>

				

				<h2>jQuery mobile examples</h2>

				<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="a"> 

					<li><a href="#basic_map">Basic map example</a></li> 

					<li><a href="#gps_map">Basic map example with geolocation</a></li>

					<li><a href="#directions_map">Get directions example</a></li> 

					<li><a data-ajax="false" href="jquery-mobile-google-maps-places.html">Search for places</a></li>

				</ul>

				

				<h2>More Google maps and jQuery examples</h2>

				<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="a"> 

					<li><a data-ajax="false" href="advanced-example.html">Microformats, Google streetview and jQuery dialog example</a></li>

					<li><a data-ajax="false" href="other-examples.html">Click and drag events with Google geo search example</a></li>

					<li><a data-ajax="false" href="load JSON example.html">Import markers with JSON example</a></li>

					<li><a data-ajax="false" href="load Microformat example.html">Import markers with microformats example</a></li>

					<li><a data-ajax="false" href="load RDFa example.html">Import markers with RDFa example</a></li>

					<li><a data-ajax="false" href="load Microdata example.html">Import markers with microdata example</a></li>

					<li><a data-ajax="false" href="load Fusion.html">Import markers with Google Fusion tables</a></li>

					<li><a data-ajax="false" href="multiple maps example.html">Multiple maps on a single page example</a></li>

					<li><a data-ajax="false" href="basic-example.html">Google maps and jQuery example</a></li>

					<li><a data-ajax="false" href="google-maps-jquery-filtering.html">Filter markers example</a></li>

				</ul>



			</div>

			

			<div data-role="footer" data-theme="a">

				<h3>Need help?</h3>

				<p class="more">Please feel free to ask for help in the <a data-ajax="false" href="http://groups.google.com/group/jquery-ui-map-discuss">forum</a></p>

				<div class="hidden" itemscope itemtype="http://data-vocabulary.org/Person">

					Author: 

					<span itemprop="name">Johan S&auml;ll Larsson</span>  

					<span itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">

						<span itemprop="locality">G&ouml;teborg</span>, 

						<span itemprop="country-name">Sweden</span> 

					</span>

				</div>

			</div>

			

		</div>

		

		<div id="basic_map" data-role="page">

			<div data-role="header" data-add-back-btn="true">

				<h1><a data-ajax="false" href="/">jQuery mobile with Google maps v3</a> examples</h1>

				<a href="jquery-mobile-example.html" data-ajax="false" data-icon="home">Home</a>

			</div>

			<div data-role="content">	

				<div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">

					<div id="map_canvas" style="height:350px;"></div>

				</div>

			</div>

		</div>

		

		<div id="gps_map" data-role="page">

			<div data-role="header" data-add-back-btn="true">

				<h1><a data-ajax="false" href="/">jQuery mobile with Google maps v3</a> examples</h1>

				<a href="jquery-mobile-example.html" data-ajax="false" data-icon="home">Home</a>

			</div>

			<div data-role="content">	

				<div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">

					<div id="map_canvas_2" style="height:300px;"></div>

				</div>

			</div>

		</div>

		

		<div id="directions_map" data-role="page">

			<div data-role="header" data-add-back-btn="true">

				<h1><a data-ajax="false" href="/">jQuery mobile with Google maps v3</a> examples</h1>

				<a href="jquery-mobile-example.html" data-ajax="false" data-icon="home">Home</a>

			</div>

			<div data-role="content">	

				<div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">

					<div id="map_canvas_1" style="height:300px;"></div>

					<p>

						<label for="from">From</label>

						<input id="from" class="ui-bar-c" type="text" value="G&ouml;teborg, Sweden" />

					</p>

					<p>

						<label for="to">To</label>

						<input id="to" class="ui-bar-c" type="text" value="Stockholm, Sweden" />

					</p>

					<a id="submit" href="#" data-role="button" data-icon="search">Get directions</a>

				</div>

				<div id="results" class="ui-listview ui-listview-inset ui-corner-all ui-shadow" style="display:none;">

					<div class="ui-li ui-li-divider ui-btn ui-bar-b ui-corner-top ui-btn-up-undefined">Results</div>

					<div id="directions"></div>

					<div class="ui-li ui-li-divider ui-btn ui-bar-b ui-corner-bottom ui-btn-up-undefined"></div>

				</div>

			</div>

		</div>

		

	</body>

	

</html>